{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/accordion.tsx",
      "content": "'use client';\r\nimport React, { ReactNode, ReactElement, isValidElement } from 'react';\r\nimport { AnimatePresence, motion } from 'motion/react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { cn } from '@/lib/utils';\r\n\r\ntype AccordionContextType = {\r\n  isActive: boolean;\r\n  value: string;\r\n  onChangeIndex: (value: string) => void;\r\n};\r\n\r\nconst AccordionContext = React.createContext<AccordionContextType>({\r\n  isActive: false,\r\n  value: '',\r\n  onChangeIndex: () => {},\r\n});\r\n\r\nconst useAccordion = () => React.useContext(AccordionContext);\r\n\r\nexport function AccordionContainer({\r\n  children,\r\n  className,\r\n}: {\r\n  children: ReactNode;\r\n  className?: string;\r\n}) {\r\n  return (\r\n    <div className={cn('grid grid-cols-2 gap-1', className)}>{children}</div>\r\n  );\r\n}\r\n\r\nexport function AccordionWrapper({ children }: { children: ReactNode }) {\r\n  return <div>{children}</div>;\r\n}\r\n\r\nexport function Accordion({\r\n  children,\r\n  multiple,\r\n  defaultValue,\r\n}: {\r\n  children: ReactNode;\r\n  multiple?: boolean;\r\n  defaultValue?: string | string[];\r\n}) {\r\n  const [activeIndex, setActiveIndex] = React.useState<string[]>(\r\n    multiple\r\n      ? defaultValue\r\n        ? Array.isArray(defaultValue)\r\n          ? defaultValue\r\n          : [defaultValue]\r\n        : []\r\n      : defaultValue\r\n        ? Array.isArray(defaultValue)\r\n          ? [defaultValue[0]]\r\n          : [defaultValue]\r\n        : []\r\n  );\r\n\r\n  function onChangeIndex(value: string) {\r\n    setActiveIndex((currentActiveIndex) => {\r\n      if (!multiple) {\r\n        return value === currentActiveIndex[0] ? [] : [value];\r\n      }\r\n\r\n      if (currentActiveIndex.includes(value)) {\r\n        return currentActiveIndex.filter((i) => i !== value);\r\n      }\r\n\r\n      return [...currentActiveIndex, value];\r\n    });\r\n  }\r\n\r\n  return React.Children.map(children, (child) => {\r\n    if (!isValidElement<{ value?: string }>(child)) return null;\r\n\r\n    const value = child.props.value ?? '';\r\n    const isActive = multiple\r\n      ? activeIndex.includes(value)\r\n      : activeIndex[0] === value;\r\n\r\n    return (\r\n      <AccordionContext.Provider value={{ isActive, value, onChangeIndex }}>\r\n        {React.cloneElement(child)}\r\n      </AccordionContext.Provider>\r\n    );\r\n  });\r\n}\r\n\r\nexport function AccordionItem({\r\n  children,\r\n  value,\r\n  className,\r\n}: {\r\n  children: ReactNode;\r\n  value: string;\r\n  className?: string;\r\n}) {\r\n  const { isActive } = useAccordion();\r\n\r\n  return (\r\n    <div\r\n      data-active={isActive || undefined}\r\n      className={cn(\r\n        `rounded-lg overflow-hidden mb-2`,\r\n         isActive\r\n            ? 'active border-2 dark:border-[#656fe2]  border-[#F2F2F2] dark:bg-[#E0ECFB] bg-[#F2F2F2]'\r\n            : 'bg-transparent border-2 dark:hover:border-[#656fe2]'\r\n        ,\r\n        className\r\n      )}\r\n      data-value={value}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function AccordionHeader({\r\n  children,\r\n  customIcon,\r\n  className,\r\n}: {\r\n  children: ReactNode;\r\n  customIcon?: boolean;\r\n  className?: string;\r\n}) {\r\n  const { isActive, value, onChangeIndex } = useAccordion();\r\n\r\n  return (\r\n    <motion.div\r\n      data-active={isActive || undefined}\r\n      className={`group p-4 cursor-pointer transition-all font-semibold    dark:text-white text-black dark:hover:bg-[#1e2a78] hover:bg-[#F2F2F2] dark:hover:text-white hover:text-black flex justify-between items-center ${\r\n        isActive\r\n          ? 'active dark:bg-[#1e2a78] bg-[#F2F2F2] '\r\n          : 'dark:bg-[#11112b] bg-white'\r\n      }\r\n      `}\r\n      onClick={() => onChangeIndex(value)}\r\n    >\r\n      {children}\r\n      {!customIcon && (\r\n        <ChevronDown\r\n          className={cn(\r\n            'transition-transform ',\r\n            isActive ? 'rotate-180' : 'rotate-0'\r\n          )}\r\n        />\r\n      )}\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nexport function AccordionPanel({\r\n  children,\r\n  className,\r\n}: {\r\n  children: ReactNode;\r\n  className?: string;\r\n}) {\r\n  const { isActive } = useAccordion();\r\n\r\n  return (\r\n    <AnimatePresence initial={true}>\r\n      {isActive && (\r\n        <motion.div\r\n          data-active={isActive || undefined}\r\n          initial={{ height: 0, overflow: 'hidden' }}\r\n          animate={{ height: 'auto', overflow: 'hidden' }}\r\n          exit={{ height: 0 }}\r\n          transition={{ type: 'spring', duration: 0.3, bounce: 0 }}\r\n          className={cn('group dark:bg-white bg-[#F2F2F2]', className)}\r\n        >\r\n          <motion.article\r\n            initial={{ clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)' }}\r\n            animate={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)' }}\r\n            exit={{\r\n              clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)',\r\n            }}\r\n            transition={{\r\n              type: 'spring',\r\n              duration: 0.4,\r\n              bounce: 0,\r\n            }}\r\n            className={`p-3 bg-transparent text-black `}\r\n          >\r\n            {children}\r\n          </motion.article>\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}